<template>
  <!-- ServicePage页面 -->
  <van-pull-refresh
    v-model="loading"
    success-text="刷新成功"
    @refresh="onRefresh"
  >
    <!-- 轮播图（懒加载） + 下拉菜单 -->
    <div class="Service_swiper">
      <!-- 下拉菜单 -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
      <!-- service下的轮播图 -->

      <van-swipe
        lazy-render
        indicator-color="#fff"
        :show-indicators="imgBanner.length > 1"
        :autoplay="3000"
      >
        <van-swipe-item v-for="(item, index) in imgBanner" :key="index">
          <!-- 自定义卡片内容 -->
          <template #default>
            <div class="swipe_text">
              <p>{{ item.introduce }}</p>
              <span>{{ item.text }}</span>
            </div>
            <img :src="item.Banner" alt="轮播图" />
          </template>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图（懒加载） + 下拉菜单 -->

    <!-- 服务列表 -->
    <div class="pageServiceList">
      <!-- 服务卡片 -->
      <div class="Service_card">
        <!-- 卡片标题 -->
        <div class="Service_card_title">
          <h3>SERVICES</h3>
        </div>

        <!-- 左右布局内容 -->
        <div class="Service_card_content" @click="goToPetCare(1)">
          <div class="Service_card_content_l">
            <img :src="Service_img1" alt="" />
            <p>Pet Hospital</p>
          </div>
          <div class="Service_card_content_r">
            <div
              class="Service_card_content_r_item"
              v-for="(item, index) in services"
              :key="index"
            >
              <img :src="item.services_img" alt="" />
              <span>{{ item.services_span }}</span>
            </div>
          </div>
        </div>

        <!-- 卡片列表 -->
        <div class="Service_card_list_card">
          <div
            class="Service_card_list_card_item"
            v-for="(item, index) in cardList"
            :key="index"
            :style="{ background: item.cardbackground }"
            @click="goToPetCare(index + 2)"
          >
            <img :src="item.card_img" alt="" />
            <h4>{{ item.card_title }}</h4>
            <span>{{ item.card_text }}</span>
          </div>
        </div>
      </div>
      <!-- 服务卡片 -->

      <!-- 视频模块 -->
      <div class="Service_Video">
        <!-- 标题 -->
        <div class="Service_Video_title">
          <h3>ABOUT US</h3>
        </div>

        <!-- 内容区域 -->
        <div class="Service_Video_content">
          <!-- 标题栏 -->
          <div class="Service_Video_content_title">
            <div class="Service_Video_content_title_l" @click="Advantages">
              <p>🏆Our Advantages</p>
            </div>
            <div class="Service_Video_content_title_r" @click="ThankYouLetter">
              <p><span>✉</span>Thank You Letter</p>
            </div>
          </div>

          <!-- 视频区域 -->
          <div @click="goVideo" class="Service_Video_content_video">
            <!-- 占位图片 -->
            <img :src="VideoImg" alt="" />
            <!-- 播放按钮 -->
            <button class="Service_Video_content_video_btn"></button>
          </div>
        </div>
      </div>
      <!-- 视频模块 -->

      <!-- 关怀模块 -->
      <div class="Service_care">
        <!-- 标题 -->
        <div class="Service_care_title">
          <h3>PET CARE</h3>
          <AsyncOrderByDistance></AsyncOrderByDistance>
          <!-- 下拉菜单 插槽 -->
        </div>
        <!-- Vant Tab切换栏 -->
        <van-tabs
          background="transparent"
          v-model:active="activeCategoryIndex"
          class="service-tabs"
          @click-tab="handleTabChange"
        >
          <van-tab
            v-for="(item, index) in petCareAll"
            :key="index"
            :title="item.title"
          >
            <!-- 新增：loading 状态 -->
            <van-loading v-if="isTabLoading" vertical size="24px"
              >加载中...</van-loading
            >
            <!-- 商品卡片列表 -->
            <div v-else class="Service_care_card">
              <div
                v-for="careItem in currentCareData"
                :key="careItem.id"
                class="Service_care_card_item"
                @click="GopetDetail(careItem.id)"
              >
                <div class="Service_care_card_item_l">
                  <img :src="careItem.care_img" alt="" />
                </div>
                <div class="Service_care_card_item_r">
                  <h4 class="title">{{ careItem.care_title }}</h4>
                  <p class="title_background_text">
                    <span>{{ careItem.care_text_bg_text1 }}</span>
                    <span>{{ careItem.care_text_bg_text2 }}</span>
                  </p>
                  <div class="score">
                    <span class="score_num">{{ careItem.care_score }}</span>
                    <span
                      class="score_text"
                      :style="getScoreTextStyle(careItem.care_score_text)"
                      >{{ careItem.care_score_text }}</span
                    >
                    <div class="score_distance">
                      {{ careItem.care_score_distance }}
                    </div>
                  </div>
                  <p class="introduce">{{ careItem.care_introduce }}</p>
                  <div class="price">
                    <span class="price_num">{{ careItem.care_price }}</span>
                    <span class="price_unit">{{
                      careItem.care_price_unit
                    }}</span>
                  </div>
                  <div v-if="careItem.care_menu" class="menu">
                    {{ careItem.care_menu }}
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>

        <!-- 分类列表 -->
        <!-- <div class="Service_care_list">
          <div
            v-for="(item, index) in petCareAll"
            :key="index"
            class="Service_care_list_item"
            :class="{ active: activeIndex === index }"
            @click="activeIndex = index"
          >
            <span>{{ item.title }}</span>
          </div>
        </div> -->

        <!-- 商品卡片列表 -->
        <!-- <div class="Service_care_card">
          <div
            v-for="(item, index) in Service_care"
            :key="index"
            class="Service_care_card_item"
          >
            <div class="Service_care_card_item_l">
              <img :src="item.care_img" alt="" />
            </div>
            <div class="Service_care_card_item_r">
              <h4 class="title">{{ item.care_title }}</h4>
              <p class="title_background_text">
                <span>{{ item.care_text_bg_text1 }}</span>
                <span>{{ item.care_text_bg_text2 }}</span>
              </p>
              <div class="score">
                <span class="score_num">{{ item.care_score }}</span>
                <span
                  class="score_text"
                  :style="getScoreTextStyle(item.care_score_text)"
                  >{{ item.care_score_text }}</span
                >
                <div class="score_distance">{{ item.care_score_distance }}</div>
              </div>
              <p class="introduce">{{ item.care_introduce }}</p>
              <div class="price">
                <span class="price_num">{{ item.care_price }}</span>
                <span class="price_unit">{{ item.care_price_unit }}</span>
              </div>
              <div v-if="item.care_menu" class="menu">{{ item.care_menu }}</div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <!-- 服务列表 -->
  </van-pull-refresh>
</template>

<script setup>
import { ref, defineAsyncComponent, computed } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const AsyncOrderByDistance = defineAsyncComponent(() =>
  import("@/components/OrderByDistance.vue")
);

// 动态懒加载导入组件

// 定义响应式变量
const loading = ref(false);
// 刷新逻辑
const onRefresh = () => {
  loading.value = true; // 开始刷新
  setTimeout(() => {
    loading.value = false; // 刷新完成
  }, 1000);
};

// Service轮播图数据 + 下拉菜单数据
import img from "@/assets/Service-img/Service_banner.jpg";

const imgBanner = ref([
  {
    introduce: "Preparing for your first service?",
    text: "See how it works",
    Banner: img,
  },
  {
    introduce: "Preparing for your first service?",
    text: "See how it works",
    Banner: img,
  },
  {
    introduce: "Preparing for your first service?",
    text: "See how it works",
    Banner: img,
  },
  {
    introduce: "Preparing for your first service?",
    text: "See how it works",
    Banner: img,
  },
]);
const value1 = ref(0); // 默认选中的下拉菜单值
const option1 = ref([
  { text: "Toronto", value: 0 },
  { text: "新款商品", value: 1 },
  { text: "活动商品", value: 2 },
]);
// Service轮播图数据 + 下拉菜单数据

//  服务卡片 数据
import Service_min_img1 from "@/assets/Service-img/min-img1.png";
import Service_min_img2 from "@/assets/Service-img/min-img2.png";
import Service_min_img3 from "@/assets/Service-img/min-img3.png";
const services = ref([
  {
    services_img: Service_min_img1,

    services_span: "Sterilization",
  },
  {
    services_img: Service_min_img2,
    services_span: "Dog&Cat Vaccine",
  },
  {
    services_img: Service_min_img3,
    services_span: "Pet Neutering",
  },
  {
    services_img: Service_min_img3,
    services_span: "FreeParking",
  },
]);

import Service_img1 from "@/assets/Service-img/img1.png";
import Service_img2 from "@/assets/Service-img/img2.png";
import Service_img3 from "@/assets/Service-img/img3.png";
import Service_img4 from "@/assets/Service-img/img4.png";
import Service_img5 from "@/assets/Service-img/img5.png";
import Service_img6 from "@/assets/Service-img/img6.png";
import Service_img7 from "@/assets/Service-img/img7.png";
const cardList = ref([
  {
    card_img: Service_img2,
    card_title: "Boarding",
    card_text: "Overnight in a Caregiver's home",
    cardbackground: "linear-gradient(to bottom, #ffece5 0%, white 90%)",
  },
  {
    card_img: Service_img3,
    card_title: "Sitting",
    card_text: "Overnight in your home",
    cardbackground: "linear-gradient(to bottom, #dcedfe 0%, white 90%)",
  },
  {
    card_img: Service_img4,
    card_title: "Drop-ins",
    card_text: "Brief home visit",
    cardbackground: "linear-gradient(to bottom, #eee9ff 0%, white 90%)",
  },
  {
    card_img: Service_img5,
    card_title: "Gromming",
    card_text: "Complete Grooming, Bath",
    cardbackground: "linear-gradient(to bottom, #fff1cd 0%, white 90%)",
  },
  {
    card_img: Service_img6,
    card_title: "Excursion",
    card_text: "Running,Swimming,Hiking",
    cardbackground: "linear-gradient(to bottom, #ecfbba 0%, white 90%)",
  },
  {
    card_img: Service_img7,
    card_title: "Photography",
    card_text: "Pet Photographers",
    cardbackground: "linear-gradient(to bottom, #e1e8f8 0%, white 90%)",
  },
]);
//  服务卡片 数据

// 视频模块数据

import VideoImg from "@/assets/Service-img/Videoimg.png";

const goVideo = () => {
  // 视频播放页
  router.push({ name: "ServiceVideo" }); // 或 router.push("/Service/Video");
};

// 视频模块数据

// 关怀模块数据

const activeCategoryIndex = ref(0); // 当前激活的tab索引
// 根据 activeCategoryIndex 的值来获取当前激活的分类标签的标题。
// 如果 activeCategoryIndex 对应的分类标签不存在，则默认返回 "All"
const activeCategory = computed(
  () => petCareAll.value[activeCategoryIndex.value]?.title || "All"
);
const categorizedData = computed(() => {
  const data = {};
  petCareAll.value.forEach((cat) => {
    if (cat.title === "All") {
      data[cat.title] = allCareItems.value;
    } else {
      data[cat.title] = allCareItems.value.filter((item) =>
        item.categories.includes(cat.title)
      );
    }
  });
  return data;
});
// 当前显示数据
const currentCareData = computed(() => {
  return categorizedData.value[activeCategory.value] || [];
});
// 数据：商品列表（PET CARE 下的商品信息）
// 1. 首先定义所有商品的公共数据
const allCareItems = ref([
  {
    id: 1,
    care_img: new URL("@/assets/Service-img/petcare_img1.png", import.meta.url)
      .href,
    care_title: "Tabby's Furry Friends",
    care_text_bg_text1: "Pet Vaccine",
    care_text_bg_text2: "FreeParking",
    care_score: "⭐4.8",
    care_score_text: "Pet Hospital",
    care_score_distance: "724m",
    care_introduce: "All the facilities are complete and professional",
    care_price: "C$56",
    care_price_unit: "Puppy Physical Examination",
    care_menu: "SeeMore Services",
    categories: ["All", "Vaccine"], // 标记所属分类
  },
  {
    id: 2,
    care_img: new URL("@/assets/Service-img/petcare_img2.png", import.meta.url)
      .href,
    care_title: "Organic Pet Boutique",
    care_text_bg_text1: "Pet Food",
    care_text_bg_text2: "Dog Neutering",
    care_score: "⭐4.7",
    care_score_text: "Pet Shop",
    care_score_distance: "409Km",
    care_introduce: "Had a great experience and very nice",
    care_price: "C$280",
    care_price_unit: "Pet insect repellent",
    categories: ["All", "Surgery"],
  },
  {
    id: 3,
    care_img: new URL("@/assets/Service-img/petcare_img3.png", import.meta.url)
      .href,
    care_title: "The Furry Fashionista Pet Parlor",
    care_text_bg_text1: "Cat Neutering",
    care_text_bg_text2: "Pet Vaccine",
    care_score: "⭐4.8",
    care_score_text: "Pet Hospital",
    care_score_distance: "724m",
    care_introduce: "All the facilities are complete and professional",
    care_price: "C$56",
    care_price_unit: "Puppy Physical Examination",
    care_menu: "SeeMore Services",
    categories: ["All", "Consultation"],
  },
  {
    id: 4,
    care_img: new URL("@/assets/Service-img/petcare_img4.png", import.meta.url)
      .href,
    care_title: "The Furry Fashionista Pet Parlor",
    care_text_bg_text1: "Cat Neutering",
    care_text_bg_text2: "Pet Vaccine",
    care_score: "⭐4.8",
    care_score_text: "Pet Hospital",
    care_score_distance: "724m",
    care_introduce: "All the facilities are complete and professional",
    care_price: "C$56",
    care_price_unit: "Puppy Physical Examination",
    care_menu: "SeeMore Services",
    categories: ["All", "SPATreatment"],
  },
  {
    id: 5,
    care_img: new URL("@/assets/Service-img/petcare_img5.png", import.meta.url)
      .href,
    care_title: "The Furry Fashionista Pet Parlor",
    care_text_bg_text1: "Cat Neutering",
    care_text_bg_text2: "Pet Vaccine",
    care_score: "⭐4.8",
    care_score_text: "Pet Hospital",
    care_score_distance: "724m",
    care_introduce: "All the facilities are complete and professional",
    care_price: "C$56",
    care_price_unit: "Puppy Physical Examination",
    care_menu: "SeeMore Services",
    categories: ["All", "Wages"],
  },
]);
// 2. 分类列表
const petCareAll = ref([
  { title: "All" },
  { title: "Vaccine" },
  { title: "Surgery" },
  { title: "Consultation" },
  { title: "SPATreatment" },
  { title: "Wages" },
]);

// 获取当前分类的数据

// 动态获取评分文字的样式
const getScoreTextStyle = (text) => {
  const colorMap = {
    "Pet Hospital": "#42c09e", // 绿色
    "Pet Shop": "#6fd1f8", // 红色
    Default: "#5a5c5d", // 默认灰色
  };
  const color = colorMap[text] || colorMap.Default;

  return {
    "--score-text-color": color,
  };
};
const isTabLoading = ref(false); // 控制 tab 切换时的 loading
const handleTabChange = () => {
  isTabLoading.value = true; // 显示 loading

  // 3秒后隐藏 loading，显示数据
  setTimeout(() => {
    isTabLoading.value = false;
  }, 1000);
};
// 关怀模块数据

const GopetDetail = (petId) => {
  // 参数名改为petId保持一致性
  router.push({
    name: "petDetail", // 使用路由name
    params: { petId }, // 键名必须与路由配置的:petId一致
  });

  // 或者使用路径形式（任选其一）
  // router.push(`/Service/petDetail/${petId}`)
};

// 跳转PetCare页面
const goToPetCare = (tabIndex) => {
  router.push({
    name: "PetCare",
    params: { defaultTab: tabIndex },
  });
};

// 跳转Advantages页面
const Advantages = () => {
  router.push({ name: "Advantages" });
};

// 跳转ThankYouLetter页面
const ThankYouLetter = () => {
  router.push({ name: "ThankYouLetter" });
};
</script> 

<style lang="scss">
/* 轮播图样式 */
.Service_swiper {
  background-image: url(@/assets/Service-img/Service_bgc.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 200px;

  .van-swipe {
    /* 每个轮播项 */
    .van-swipe-item {
      height: 130px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 94%;
        height: 100%;
        object-fit: cover; /* 图片填充方式 */
        border-radius: 10px; /* 圆角 */
        margin: 0 auto; /* 居中 */
      }
      .swipe_text {
        position: absolute;
        left: 30px;
        top: 15px;
        width: 35%;
        height: 40px;
        color: #fff;
        font-size: 20px;
        font-weight: 550;
        line-height: 26px;

        span {
          color: #9beeef;
          font-size: 12px;
        }
      }
    }

    /* 轮播指示器样式 */
    .van-swipe__indicators {
      bottom: 4px;

      .van-swipe__indicator {
        width: 7px;
        height: 3.5px;
        border-radius: 5px;
      }
    }
  }
  // 下拉菜单样式
  .van-dropdown-menu {
    width: 22%;
    display: flex;
    justify-content: center;
    .van-dropdown-menu__bar {
      background-color: transparent;
      box-shadow: none;

      /* 文本样式 */
      .van-ellipsis {
        font-weight: bold;
        font-size: 16px;
      }

      /* 下拉箭头样式 */
      .van-dropdown-menu__title:after {
        border: 3.5px solid;
        border-color: transparent transparent #2a2727 #000;
      }
    }
  }
}
// 服务卡片样式
.pageServiceList {
  .Service_card {
    background-color: #f7f7f7;
    border-radius: 10px;
    margin-top: -10px;
    .Service_card_title {
      font-size: 18px;
      padding: 12px 18px;
    }

    .Service_card_content {
      width: 92%;
      height: 120px;
      border-radius: 10px;
      margin: 0 auto;
      background: linear-gradient(to bottom, #dce2f5 0%, white 90%);
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      box-sizing: border-box;

      .Service_card_content_l {
        margin-top: 14px;

        img {
          width: 50px;
        }

        p {
          font-size: 18px;
          font-weight: bold;
          margin-top: 6px;
        }
      }

      .Service_card_content_r {
        overflow-y: auto;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: end;
        -ms-overflow-style: none; /* IE 和 Edge */
        scrollbar-width: none; /* Firefox */

        &::-webkit-scrollbar {
          display: none; /* Chrome、Safari 和 Opera */
        }

        .Service_card_content_r_item {
          background-color: #fff;
          border-radius: 20px;
          margin: 6px 0;
          text-align: center;
          padding: 2px;
          font-size: 14px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-around;
          align-items: center;

          img {
            width: 14px;
            object-fit: contain;
            margin: 0 2px;
            border-radius: 50%;
          }

          span {
            margin: 0 2px;
          }
        }
      }
    }

    .Service_card_list_card {
      width: 92%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 0 auto;

      .Service_card_list_card_item {
        width: 42%;
        height: 110px;
        border-radius: 10px;
        padding: 10px;
        margin-top: 15px;

        img {
          width: 50px;
        }

        h4 {
          font-size: 16px;
        }

        span {
          display: -webkit-box; /* 关键1：使用弹性盒模型 */
          -webkit-box-orient: vertical; /* 关键2：必须设置垂直方向 */
          -webkit-line-clamp: 2; /* 限制显示2行 */
          overflow: hidden; /* 隐藏超出部分 */
          text-overflow: ellipsis; /* 超出显示... */
          width: 79%;
          font-size: 12px;
          color: #56535b;
          line-height: 16px;
          white-space: normal;
          word-break: break-word;
        }
      }
    }
  }
}
// 视频模块样式
.Service_Video {
  .Service_Video_title {
    height: 38px;
    display: flex;
    align-items: center;
    font-size: 16px;
    padding: 0 18px;
    margin-top: 25px;
  }

  .Service_Video_content {
    width: 92%;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box;

    .Service_Video_content_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 12px;

      > div {
        width: 47%;
        height: 35px;
        background-color: #f2f4f5;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
        color: #5a5c5d;

        span {
          color: red;
        }
      }
    }

    .Service_Video_content_video {
      position: relative;
      width: 100%;
      height: 140px; /* 固定高度 */
      overflow: hidden;
      border-radius: 5px;

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
      }

      .Service_Video_content_video_btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        border: 0;

        &::after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 10px 0 10px 17px;
          border-color: transparent transparent transparent white;
          transform: translateX(110%);
        }
      }

      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.2);
        z-index: 1;
        border-radius: 5px;
      }

      video {
        opacity: 0; /* 默认隐藏 */
        transition: opacity 0.3s ease;

        &.active {
          opacity: 1; /* 当视频激活时显示 */
        }
      }
    }
  }
}
// 关怀模块样式
.Service_care {
  padding-bottom: 100px;

  .Service_care_title {
    position: relative;
    height: 38px;
    display: flex;
    align-items: center;
    font-size: 16px;
    padding: 0 18px;
    margin-top: 25px;
  }

  .Service_care_list {
    width: 92%;
    display: flex;
    align-items: center;
    margin: 0 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 0;

    &::-webkit-scrollbar {
      display: none;
    }

    .Service_care_list_item {
      background-color: #e5e7eb;
      color: #6c7078;
      border-radius: 15px;
      margin-left: 8px;
      white-space: nowrap;
      text-align: center;
      line-height: 30px;

      span {
        padding: 12px;
        font-size: 12px;
        font-weight: bold;
      }

      &:first-child {
        margin-left: 0;
      }

      &.active {
        background-color: #c9f5ed;
        color: #35b590;
      }
    }
  }

  .Service_care_card {
    display: flex;
    flex-direction: column;
    align-items: center;

    .Service_care_card_item {
      width: 92%;
      background-color: #fff;
      border-radius: 10px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      padding: 10px;
      box-sizing: border-box;

      .Service_care_card_item_l {
        width: 25%;
        img {
          width: 100%;
          border-radius: 10px;
        }
      }

      .Service_care_card_item_r {
        width: 70%;
        font-size: 12px;
        font-weight: bold;

        .title {
          font-size: 15.3px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .title_background_text {
          width: 80%;
          display: flex;
          align-items: center;
          margin: 8px 0;

          span {
            background-color: #f2f4f5;
            padding: 0 4px;
            border-radius: 8px;
            margin-right: 4px;
          }
        }

        .score {
          position: relative;
          margin: 8px 0;

          span {
            display: inline-block;
            border: 1.5px solid;
            border-radius: 10px;
            padding: 0 4px;
            margin-right: 4px;
            font-weight: bold;

            &.score_num {
              color: orange;
            }

            &.score_text {
              color: var(--score-text-color); /* 使用 CSS 变量 */
              // border: 1px solid var(--score-text-color); /* 边框颜色也动态变化 */
            }
          }

          .score_distance {
            position: absolute;
            color: #ccc;
            align-self: flex-end;
            right: 10px;
            bottom: 0;
          }
        }

        .introduce {
          color: #ccc;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .price {
          width: 90%;
          display: flex;

          .price_num {
            color: orange;
            margin-right: 10px;
          }

          .price_unit {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }

        .menu {
          width: 60%;
          display: flex;
          justify-content: end;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            width: 5px;
            height: 5px;
            border: 2px solid #797a7e;
            border-left: 0;
            border-top: 0;
            transform: translateY(-60%) rotate(45deg);
            top: 50%;
            right: -10px;
          }
        }
      }
    }
  }
  .van-tabs__wrap {
    display: flex;
    justify-content: space-between;
    .van-tabs__nav {
      width: 96%;
      display: flex;
      align-items: center;
      margin: 0 auto;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 0;
      &::-webkit-scrollbar {
        display: none;
      }
      .van-tab {
        font-size: 12px;
        margin-left: 8px;
        flex: none;
        padding: 6px 12px;
        background-color: #e5e7eb;
        color: #6c7078;
        border-radius: 20px;
        white-space: nowrap;
        text-align: center;
      }
    }

    .van-tab--active {
      background-color: #c9f5ed !important;
      color: #35b590 !important;
    }
    .van-tabs__line {
      display: none;
    }
  }
}
</style>